{extend name="public/base"/}
{block name="style"}
{/block}
{block name="body"}
<div class="main-box no-header clearfix">
    <header class="main-box-header clearfix">
        <div class="pull-left">
            <h2>{$meta_title}</h2>
        </div>
    </header>
    <div class="main-box-body clearfix">
        <!-- 表格列表 -->
        <div class="table-responsive clearfix">
            <div class="tabs-wrapper">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab-home">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th width="60">ID</th>
                                    <th width="60">名称</th>
                                    <th width="60">图片</th>
                                    <th width="60">预览</th>
                                    <th width="60">链接</th>
                                    <th width="120">更新时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach($data as $k=>$v){ ?>
                                <tr>
                                    <td>{$v['id']}</td>
                                    <td>
                                        {$v['name']}
                                    </td>
                                    <td>
                                        <img id="picker_upload" data-bind="{$v.id}" src="{$v.pic|getPicUrl}" width="192" height="108">
                                    </td>
                                    <td>
                                        <a onclick="showImg()" style="cursor:pointer">预览</a>
                                    </td>
                                    <td>
                                        <input value="{$v.url}" id="change_url" class="form-control" type="text">
                                    </td>
                                    <td id="change_time">
                                        <?php echo date('Y-m-d H:i'); ?>
                                    </td>
                                </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /表格列表 -->
    </div>
</div>
<!-- 隐藏的form-->
<div class="hide">
    <form id="h5-file">
        <input name="file" type="file" id="upload_file_input">
  </form>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/js/bootstrap-editable.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.fn.editable.defaults.mode = 'popup';
        $.fn.editableform.buttons = '<button type="submit" class="btn btn-success editable-submit btn-mini"><i class="fa fa-check-square-o fa-white"></i></button>' +
                '<button type="button" class="btn editable-cancel btn-mini"><i class="fa fa-times"></i></button>';
        $('.editable').editable();
//        上传图片操作
        $('#picker_upload').click(function(){
            $('#upload_file_input').click();
        })
        $('#upload_file_input').change(function(){
            var h5File = new FormData($('#h5-file')[0]);
            h5File.append('id', $('#picker_upload').data().bind);
            $.ajax({
                url :'{:url("sp_changepic")}',
                type : 'POST',
                data : h5File,
                contentType : false, //禁止设置请求类型
                processData : false, //禁止jquery对DAta数据的处理,默认会处理
                //禁止的原因是,FormData已经帮我们做了处理
                success : function(data) {
                             if(data.code==200){
                                  layer.msg(data.msg,{icon: 1,time:1000});
                                  $('#picker_upload').attr('src',data.data);
                                  $('#change_time').html(getTime());
                             }else{
                                 layer.msg(data.msg,{icon: 2,time:1000});
                             }
                        }
                });
        }) 
       //修改链接地址
        $('#change_url').blur(function(){
            var url=$(this).val();
            if(!/^(http:\/\/|https:\/\/)/i.test(url)){
                layer.msg('请填写合理的链接地址',{icon: 2,time:1000});
                return;
            }
            $.post('{:url("sp_changeurl")}',{id:$('#picker_upload').data().bind,url:url},function(data){
                     if(data.code==200){
                          layer.msg(data.msg,{icon: 1,time:1000});
                          $('#change_time').html(getTime());
                     }else{
                         layer.msg(data.msg,{icon: 2,time:1000});
                     }                
            })
        })
    })
//    快速展示操作
    function  showImg() {
        layer.open({
            type: 1,
            area: ['960px', '600px'],
            fixed: false, //不固定
            maxmin: true,
            content: '<img src="' + $('#picker_upload').attr('src') + '" width="960" height="540">',
        });
    }  
    function getTime(){
        var T=new Date();
        var time=T.getFullYear()+'-'+(T.getMonth()+1)+'-'+T.getDate()+' '+T.getHours()+':'+T.getMinutes();
        return time 
    }
</script>
{/block}